<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>两栏式布局</title>

  <link rel="stylesheet" href="./css/index.css">
</head>

<body>



  <div class="sidebar">
    Min: 150px
    <br/> Max: 25%
  </div>
  <div class="content">

    <a href="http://www.ruanyifeng.com/blog/2020/08/five-css-layouts-in-one-line.html">只要一行代码，实现五种 CSS 经典布局</a>

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis nulla architecto maxime modi nisi. Quas saepe dolorum, architecto
    quia fugit nulla! Natus, iure eveniet ex iusto tempora animi quibusdam porro?
    <div class="box">
      123
    </div>
    <p>两栏式布局就是一个边栏，一个主栏。</p>
    <p>下面的实现是，边栏始终存在，主栏根据设备宽度，变宽或者变窄。如果希望主栏自动换到下一行，可以参考上面的"并列式布局"。</p>
    <p>grid-template-columns指定页面分成两列。
      第一列的宽度是minmax(150px, 25%)，即最小宽度为150px，最大宽度为总宽度的25%；第二列为1fr，即所有剩余宽度。
    </p>
  </div>


</body>

</html>